<template>
  <div class="page-header-index-wide"> 
    <audio id="audioID" ref="audio" class="aud"  @ended="audioEnded">
        <source :src="audioUrl" />
    </audio>
    <div style="display:flex">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '10px' }">
        <a-card title="基础信息" style="height:350px">   
          <dv-active-ring-chart :config="config1" style="width:100%;height:300px;margin-top: -50px;" v-if="tjxx.rysl > 0" />
          <!-- <div style="margin-top:10px;"><span style="font-size: 20px;font-weight: bold;font-size:20px;color:#fb0202">{{tjxx.rysl}}</span>人</div>
          <div style="margin-top:20px;font-size:15px">档案总量<span style="color:#2db7f5;font-weight:bold">{{tjxx.wjsl}}</span>份</div>
          <div style="margin-top:20px;font-size:15px">档案分类<span style="color:#c56541;font-weight:bold">{{tjxx.mlsl}}</span>类</div>
          <div style="margin-top:20px;font-size:15px">存储总量<span style="color:#34b3a0;font-weight:bold">{{tjxx.size}}</span>GB</div> -->
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '10px' }">
        <a-card style="height:350px"> 
          <div id = "azfs" style="width:100%;height:300px;background-color:#fff;margin:10px;"></div>
        </a-card>
      </a-col> 
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '10px' }">
        <a-card style="height:350px"> 
          <div id = "jkzk" style="width:100%;height:300px;background-color:#fff;margin:10px;"></div>
        </a-card>
      </a-col> 
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '10px' }">
        <a-card style="height:350px"> 
          <div id = "azd" style="width:100%;height:300px;background-color:#fff;margin:10px;"></div>
        </a-card>
      </a-col> 
    </div>
    <a-row>
      <a-col :span="12">
        <a-card :loading="loading" :bordered="false" title="审核信息" :style="{ marginTop: '24px' }">          
          <a-row style="height:30px" >
            <a-col :span="2">
              
            </a-col>
            <a-col :span="6" style="font-weight:bold">
              借阅人
            </a-col>
            <a-col :span="6" style="font-weight:bold">
              申请时间
            </a-col>
            <a-col :span="4" style="font-weight:bold">
              操作类型
            </a-col>
            <a-col :span="6" style="font-weight:bold">
              状态
            </a-col>
          </a-row>
          <a-row  v-for="(row, index) in shdata"  :key="index" style="height:40px" >
            <a-col :span="2">
              <a-icon type="sound" style="margin-left:20px"/>
            </a-col>
            <a-col :span="6">
              {{row.jyr}}
            </a-col>
            <a-col :span="6">
              {{rdatetime(row.create_time)}}
            </a-col>
            <a-col :span="4">
              <a-tag color="#2db7f5" v-if="row.czlx == '1'">
                  复印档案
              </a-tag>
              <a-tag color="#f50" v-if="row.czlx == '2'">
                  调用档案
              </a-tag>
            </a-col>
            <a-col :span="6">
              {{row.zt}}
            </a-col>
          </a-row> 
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card :loading="loading" :bordered="false" title="新增人员" :style="{ marginTop: '24px' }">
          <a-row style="height:30px" > 
            <a-col :span="2" style="font-weight:bold">
              姓名
            </a-col>
            <a-col :span="4" style="font-weight:bold">
              身份证号
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              性别
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              安置方式
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              安置地
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              退伍时间
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              录入时间
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              操作
            </a-col>
          </a-row>
          <a-row  v-for="(row, index) in rydata"  :key="index" style="height:40px" >
            <a-col :span="2" style="font-weight:bold">
              {{row.xm}}
            </a-col>
            <a-col :span="4" style="font-weight:bold">
              {{row.sfzh}}
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              {{row.xingbie}}
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              {{row.azfs}}
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              {{row.depart_name}}
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              {{rdatetime(row.twsj)}}
            </a-col>
            <a-col :span="3" style="font-weight:bold">
              {{rdatetime(row.create_time)}}
            </a-col> 
            <a-col :span="3" style="font-weight:bold;color:blue" >
              
              <a-tag color="#2db7f5" @click="handleDaAn(row)">
                查看
              </a-tag>
            </a-col>
          </a-row> 
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar' 
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import * as echarts from 'echarts'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import { httpAction, getAction } from '@/api/manage'
  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import moment from 'moment';
  const rankList = []
  for (let i = 0; i < 7; i++) {
    rankList.push({
      name: '白鹭岛 ' + (i+1) + ' 号店',
      total: 1234.56 - i * 100
    })
  }
  const barData = []
  for (let i = 0; i < 12; i += 1) {
    barData.push({
      x: `${i + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200
    })
  } 
  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {     
        config1: {
          data: [
            {
              name: "总人数/人",
              value: 0
            },
            {
              name: "档案种类/类",
              value: 0
            },
            {
              name: "档案文件/件",
              value: 0
            },
            {
              name: "存储总量/KB",
              value: 0
            },
          ], 
          digitalFlopStyle: {
            fontSize: 15,
            fill: '#000'
          },
          showOriginValue: true,
          lineWidth: 30,
          // radius: "55%",
          // activeRadius: "60%"
        },    
        audioUrl:'/tone.mp3',//音频资源
        audioOpen:false,
        loading: true,
        center: null,
        rankList,
        barData,
        loginfo:{},
        visitFields:['ip','visit'],
        visitInfo:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />,
        config: {
          header: ['名称', '地址'],
          data: [ 
          ],
          rowNum: 7, //表格行数
          headerHeight: 35,
          headerBGC: '#0f1325', //表头
          oddRowBGC: '#0f1325', //奇数行
          evenRowBGC: '#171c33', //偶数行
          index: true,
          columnWidth: [50],
          align: ['center']
        },
        url:{
           shlist :"tj/tjInfo/shxx",
           rylist :"tj/tjInfo/ryxx",
           azfstj :"tj/tjInfo/azfstjxx",//查询安置方式统计信息
           jktj :"tj/tjInfo/jktjxx",//查询健康状况统计信息
           azdtj :"tj/tjInfo/azdtjxx",//查询安置地统计信息
           rytj :"tj/tjInfo/rytjxx"//查询人员统计信息
        },
        shdata:[],
        rydata:[],
        tjxx:{
          rysl:0,
          wjsl:0,
          mlsl:0,
          size:0
        }
      }
    },
    created() {
      let that  = this;
      setTimeout(() => {
        this.loading = !this.loading
        console.log("循环");
        this.drawAZFS("azfs");
        this.drawJKZK("jkzk");
        this.drawAZD("azd");
        this.getrytj();
        
      }, 1000);
      // setInterval(function () {
      //   that.getshxx();
      // }, 10000);
      this.initLogInfo();
      this.getshxx();
      this.getryxx();
      
    },
    methods: {
      handleDaAn(e){
        this.$router.push({ 
          name: 'dary-DaList', // 要跳转的组件名称
          // path: '/lszn/LsInfoList',
          params: {  // 路由携带参数
            'xm': e.xm,
            'sfzh':e.sfzh,
            'id':e.id,
            'isZhanKai':'yes',
          }
        }); 
      },
      audioEnded(){
        this.audioOpen=false
        console.log('end');    
      },
      getrytj(){
        httpAction(this.url.rytj,'','get').then((res)=>{ 
             this.tjxx.rysl = res.rysl;
             this.tjxx.wjsl = res.wjsl;
             this.tjxx.mlsl = res.mlsl;
             let wjsize = res.wjsize/(1024 * 1024 * 1024);
             let name = "";
             if (parseInt(wjsize) > 0){
              this.tjxx.size =  parseInt(wjsize);
              name = "存储总量/GB"
             }else{
              wjsize = res.wjsize/(1024 * 1024); 
              if(parseInt(wjsize) > 0){
                this.tjxx.size =  parseInt(wjsize);
                name = "存储总量/M"
              }else{
                wjsize = res.wjsize/(1024); 
                if(parseInt(wjsize) > 0){
                  this.tjxx.size =  parseInt(wjsize);
                  name = "存储总量/KB"
                }else{
                  wjsize = res.wjsize; 
                  name = "存储总量/字节"
                }
              }
             }
             
             this.config1.data[0].value = res.rysl;
             this.config1.data[1].value = res.mlsl;
             this.config1.data[2].value = res.wjsl;
             this.config1.data[3].name = name;
             this.config1.data[3].value = wjsize;
             console.log("config1",this.config1);
        });  
      },
      drawAZFS(id){
           var chartDom = document.getElementById(id);
           console.log("echart",chartDom);
           var myChart = echarts.init(chartDom);
         
           var option; 
           option = {
            title: {
              text: '安置方式占比',
              subtext: '来自统计数据',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '安置方式占比',
                type: 'pie',
                radius: '50%',
                data: [ 
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          //  option = {
          //      title: {
          //        text: '安置方式统计',
          //        subtext: '',
          //        left: 'center'
          //      },
          //      tooltip: {
          //        trigger: 'item'
          //      },
          //      legend: {
          //        orient: 'vertical',
          //        left: 'left',
          //        show:false
          //      },
          //      color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'],
          //      series: [
          //        {
          //          name: '安置方式统计',
          //          type: 'pie',
          //          radius: '50%',
          //          label: {
          //            alignTo: 'edge',
          //            formatter: '{name|{b}}\n{time|{c} 人}',
          //            minMargin: 4,
          //            edgeDistance: 10,
          //            lineHeight: 15,
          //            rich: {
          //              time: {
          //                fontSize: 10,
          //                color: '#999'
          //              }
          //            }
          //          },
          //          data: [ 
          //          ],
          //          emphasis: {
          //            itemStyle: {
          //              shadowBlur: 10,
          //              shadowOffsetX: 0,
          //              shadowColor: 'rgba(122, 6, 6, 0.5)'
          //            }
          //          }
          //        }
          //      ]
          //    };
             httpAction(this.url.azfstj,'','get').then((res)=>{ 
                
                 option.series[0].data = res.data 
                 console.log(option)
                 option && myChart.setOption(option);
             }); 
      },
      drawJKZK(id){
           var chartDom = document.getElementById(id);
           console.log("echart",chartDom);
           var myChart = echarts.init(chartDom);
           var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
           var lineStyle = {
              normal: {
                width: 1,
                opacity: 0.5
              }
            };
          
             var option = {
                title: {
                  text: '健康状态统计'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  left: 'center',
                  show:false,
                  data: [
                    '健康状态统计',
                    
                  ]
                },
                radar: [

                  {
                    indicator: [
                      { text: '有慢性病', max: 100 },
                      { text: '健康或良好', max: 100 },
                      { text: '一般或较弱', max: 100 },
                      { text: '残疾', max: 100 }, 
                    ],
                    radius: 80,
                    center: ['50%', '50%']
                  } 
                ],
                series: [
                  {
                    type: 'radar',
                    tooltip: {
                      trigger: 'item'
                    },
                    
                    data: [
                      {
                        value: [60, 73, 85, 40],
                        name: '健康状态统计',
                        symbol: "none",
                        lineStyle: {
                            color: 'rgba(141, 6, 6, 1)'
                        },
                        areaStyle: {
                          color: 'rgba(141, 6, 6, 1)'
                        },
                      }
                    ]
                  } 
                ]
              };
             httpAction(this.url.jktj,'','get').then((res)=>{ 
                
                //  option.radar[0].indicator = res.data 
                 let data =[];
                 let max = 0;
                 res.data.forEach((item)=>{
                     data.push(item.max)
                     if (item.max > max){
                         max = item.max
                     }
                 });
                 let maxdata = [
                      { text: '有慢性病', max: max },
                      { text: '健康或良好', max: max },
                      { text: '一般或较弱', max: max },
                      { text: '残疾', max: max }, 
                 ]
                 option.radar[0].indicator = maxdata;
                 option.series[0].data[0].value = data
                 console.log("监控状况",res)
                 option && myChart.setOption(option);
             }); 
      },
      drawAZD(id){
           var chartDom = document.getElementById(id);
           console.log("echart",chartDom);
           var myChart = echarts.init(chartDom);
           var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
           var lineStyle = {
              normal: {
                width: 1,
                opacity: 0.5
              }
            };
          
             var option = {
                title: {
                  text: '安置地统计',
                  subtext: '',
                  left: 'center'
                },
                xAxis: {
                  type: 'category',
                  axisLabel:{ //展示角度
                  rotate:60
                  },
                  data: []
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: [],
                    type: 'bar'
                  }
                ]
              };
             httpAction(this.url.azdtj,'','get').then((res)=>{ 
                 let data = res.data;
                 data.forEach(element => {
                  option.xAxis.data.push(element.depart_name)
                  option.series[0].data.push(element.num)
                 }); 
                 option && myChart.setOption(option);
             }); 
      },
      rdatetime(timesampe){
        return moment(timesampe).format('YYYY-MM-DD');
      },
      getryxx(){
        httpAction(this.url.rylist,'','get').then((res)=>{  
            // let data = res;
            this.rydata = res.data;
            console.log("人员信息",res);
            if(res.code == '0'){
               
            }  
        }); 
      },
      getshxx(){ 
        
        httpAction(this.url.shlist,'','get').then((res)=>{  
            // let data = res;
            console.log("审核信息",res);
            if(res.code == '0'){
              let data = res.data;
              this.shdata = res.data; 
            }  
        }); 
      },
      initLogInfo () {
        getLoginfo(null).then((res)=>{
          if(res.success){
            Object.keys(res.result).forEach(key=>{
              res.result[key] =res.result[key]+""
            })
            this.loginfo = res.result;
          }
        })
        getVisitInfo().then(res=>{
          if(res.success){
             this.visitInfo = res.result;
           }
         })
      },
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  } 
  /* 环形样式 */
  /deep/ .dv-active-ring-chart .active-ring-info .active-ring-name {
      width: 100px;
      height: 30px;
      color: #000 !important;
      text-align: center;
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
  } 
  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>